<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery带进度条幻灯片图片轮播特效 - 素材牛jQuery特效掩饰</title>
<meta name="description" content="jquery幻灯片自动轮播图片切换，制作带进度条提示，通过点击导航标签进行幻灯片图片切换，设置上一个、下一个、开始、暂停按钮控制幻灯片图片切换。" />
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
 
/* introNav */
#introNav{position:relative;width:96%;height:105px;overflow:hidden;margin:20px;}
#introNav #playback li{float:left;}
#introNav #playback .pause{display:none;}
#introNav #playback a{display:block;width:20px;height:20px;float:left;margin:0 3px 0 0;text-indent:-9000px;outline:0;background-image:url(images/nav-icons.png);background-repeat:no-repeat;}
#introNav #playback .prev a{background-position:0 0;}
#introNav #playback .play a{background-position:0 -20px;}
#introNav #playback .pause a{background-position:0 -60px;}
#introNav #playback .next a{background-position:0 -40px;}
#introNav #playback a:hover{opacity:0.9;}
/* introNav timeline */
#timeline{width:100%;height:15px;position:absolute;top:25px;left:0;overflow:hidden;}
#timeline .active{width:50%;height:3px;position:relative;background-color: #FF0000;margin-top:-3px;opacity: 0.8;}
#timeline .inside{width:100%;height:3px;position:relative;background-color: #333333;opacity: 0.6;}
/* introNav nav */
#introNav ul.nav{width:100%;height:40px;position:absolute;top:30px;left:0;margin:0;}
#introNav .nav li{list-style:none;margin:0;position:absolute;top:0;left:0;text-align:center;padding:0;background:none;}
#introNav .nav li a{font-size:14px;color:#6E7577;outline:0;text-decoration:none;}
#introNav .nav li a:hover{color:#525758;}
#introNav .nav li.active a{color:#383C3D;}
#introNav .nav a .point{display:block; position:absolute;left:0;outline:0;cursor:pointer;width: 10px; height: 10px;top:-8px; background-color: #999999; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;opacity: 0.9;}
 
} 
</style>

<script type="text/javascript" src="../jquery/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="playerbar.js"></script>
</head>

<body>

<div class="demo">

 
	
	
	<div id="introNav">
		<div class="contral"><i class="fa fa-play-circle"></i></div>
		<div id="timeline">
			<div class="inside"></div>
			<div id="timeactive" class="active"></div>
		</div>
		<ul id="timelabel" class="nav">
			<li class="active"><a href="javascript:void(0);">进口白色奥迪A4L <span class="point"></span></a></li>			 			
		</ul>
	</div><!--introNav end-->
	
</div>				
 <script >
$(function() {
// 	 console.info("fdsfd");
// 	 //获取总长度
// 	 //根据个数设定间隔
// 	 //确定每个的点击事件
// 	 //自动播放
// 	 var datas=[];
// 	 for(var i=0;i<11;i++){
// 		 datas.push({"title":"8-"+i,"value":i+"v","type":"day"});
// 	 }
// 	 var ilength=$("#introNav").width();
// 	 console.info(ilength);
// 	 var istep=ilength / (datas.length-1);
	 
// 	 var html="";
// 	 for(var i=0;i<10;i++){
// 		var offsetx="left:"+i*10 +"%";
// 		html+="<li style='"+offsetx+"'><a href='javascript:void(0);'>"+datas[i].title+" <span class='point'></span></a></li>";	 
// 	 }
// 	 html+="<li style='left:99.4%'><a href='javascript:void(0);'>"+datas[i].title+" <span class='point'></span></a></li>";	 
// 	 $("#timelabel").html(html);
	 
// 	 $("#timelabel li").on("click",function(e){		 
// 		 $("#timeactive").css("width",$(this).css("left"));
// 	 });
	 
// 	 var timer=setInterval('',2000);
// 	 clearInterval(timer);
	  var b=new PlayerBar();
	  b.play();
})


</script>

</body>
</html>
